<template>
	<div class="w-page w-aboutus">
		<Header navNum="2" @isSearch='isSearch'></Header>
		<div class="conbox" v-if="!isSearchList">
			<div class="w-width">
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<Leftcard class="w-card-left shrink0" v-if="menuList.length" :isBackHome="isBackHome" :deAcBig='acBig' :menuList="menuList" :columnName="columnName" @aa="out"></Leftcard>
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item :to="{}"><span @click="acBig = '0'; isBackHome = true">{{ columnName }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item :to="{}"><span @click="isdetail = 0">{{ title }}</span></el-breadcrumb-item>
                  <el-breadcrumb-item v-if="isdetail == 1">{{ title }}</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-maincon" v-if="isdetail == 0">
								<div class="w-tabtitle">{{title}}</div>
								<div v-if="introInfoList.length === 1">
									<div v-for="(v,i) in introInfoList" :key="i" >
										<div class="w-tabcon" v-html="v.content"></div>
									</div>
								</div>
                <div v-else-if="introInfoList.length">
                  <div class="w-commonList">
                    <ul class="w-tabul">
                      <li v-for="(v,i) in introInfoList" :key="i" @click="getDetail(v.id)">
                        <div class="w-a flex hs vc">
                          <span class="dian shrink0"></span>
                          <span class="w-text ellipsis">
                            <span>{{ v.title }}</span>
                          </span>
                        </div>
                        <div class="w-time">
                          <span>{{ v.createTime.split(' ')[0] }}</span>
                        </div>
                      </li>
                    </ul>
                  </div>
                </div>
								<div v-else>
									<div class="w-con" >暂无</div>
								</div>
							</div>
              <div class="w-detail" v-if="isdetail == 1">
                <detailPage :info='info'></detailPage>
              </div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>
<script>
	import {
		articleClassList,
    articleMenu
	} from '@/api/article'
  import {articleDetail} from "../api/article";
  import detailPage from "./common/detail";
	export default {
    components: {
      "detailPage": detailPage
    },

		data() {
			return {
				columnName: '关于我们',
				acBig: '',
				title: '',
				classId: 0,
				introInfoList: [],
				menuList: [
				  {
						id: 1,
						name: '基金会简介',
						apiId: 34,
					}
				],
				isSearchList: false,
        isdetail: 0,
        info: {},
        isBackHome: false
			};
		},

    beforeCreate() {

    },

    created() {
      if (this.$route.query.deAcBig) {
        this.acBig = this.$route.query.deAcBig.toString()
        this.changeMenu()
      }

      this.getMenuList()
		},

    watch: {
      $route () {
        this.acBig = this.$route.query.deAcBig
        this.out(JSON.stringify({
          acBig: this.acBig,
          acSml: ''
        }))

        this.changeMenu()
      }
    },

		methods: {
      // 获取左侧菜单
		  getMenuList() {
        articleMenu({
          where: []
        }).then(res => {
          console.log(res.data)
          let cacheList = res.data

          cacheList.forEach(item => {
            if (item.name === '关于我们') {
              console.log(item.children)
              let cacheList = item.children

              cacheList.forEach((item, index) => {
                item.apiId = item.id
                item.id = index + 1
              })

              this.menuList = cacheList

              // 判断是否从子菜单进入
              if (this.$route.query.deAcBig) {
                this.acBig = this.$route.query.deAcBig
                this.out(JSON.stringify({
                  acBig: this.acBig,
                  acSml: ''
                }))
                this.changeMenu()
              } else {
                this.classId = this.menuList[0].id
              }

              this.isSearch()
            }
          })
        })
      },

			isSearch(data){
				this.isSearchList = data
			},

			out(data) {
        var _this = this
        console.log(data)
				if (data) {
          _this.page = 1
          _this.isdetail = 0
          var cacheData = JSON.parse(data);
          _this.acBig = cacheData.acBig.toString()

          _this.$router.replace({
            path: '/aboutus',
            query: {
              deAcBig: parseInt(_this.acBig)
            }
          }).catch(err => {})
				}

				this.isBackHome = false
			},

      changeMenu() {
		    let _this = this

        _this.menuList.forEach(item => {
          if (parseInt(item.id) === parseInt(_this.acBig)) {
            _this.title = item.name

            _this.classId = item.apiId
          }
        });
        _this.getList()
      },

			getList() {
		    console.log(this.classId)
				articleClassList({
					classId: this.classId,
					size: 0
				}).then(response => {
					this.introInfoList = response.data.list
				})
			},

      // 获取文章详情
      getDetail(id){
        this.info = {}
        this.isdetail = 1

        articleDetail({
          id: id,
        }).then(response => {
          this.info = response.data
          // this.info.className = 'author_box'
        })
      }
		}
	};
</script>

<style scoped>
  /* li */
  .w-tabul {
    margin-bottom: 30px;
    box-sizing: border-box;
    min-height: 24.5vh;
  }

  .w-tabul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1PX dotted #999;
    cursor: pointer;
  }

  .w-tabul .w-time {
    font-size: 16px;
    color: #333333;
  }

  .w-tabul .w-a {
    width: 75%;
    font-size: 16px;
    color: #333333;
    padding: 18px 0 18px 9px;
    box-sizing: border-box;
  }

  .w-tabul .dian {
    width: 6px;
    height: 6px;
    background: rgba(102, 102, 102, 1);
    border-radius: 50%;
    margin-right: 13px;
  }

  .w-text {
    width: calc(90% - 70px);
  }
</style>

<style scoped>
	.w-maincon>>>img{
		width: 100%;
		display: block;
	}
	.w-maincon>>>p{
		//text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		//text-align: justify;
	}
	.w-tabcon p {
		//text-indent: 30px;
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		/*line-height: 2;*/
		margin-bottom: 20px;
		//text-align: justify;
	}

	/* ............... */
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 74%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-aboutus .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-aboutus .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-aboutus .el-breadcrumb__inner a:hover,
	.w-aboutus .el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}
</style>
